<template>
  <div>
    <el-row style="display: flex; width: 100wh; height: calc(100vh - 100px)">
      <el-col :span="4" class="left-col"
        ><!--左边的导航-->
        <el-row
          style="width: 100%; height: 1px; background-color: white"
        ></el-row
        ><!--白线-->
        <el-row class="left-everyrow"
          ><!--我的借阅-->
          <router-link
            :to="{ name: 'myBorrow' }"
            tag="button"
            :class="showBorrow ? 'showRow' : 'notShow'"
            @click.native="change('borrow')"
          >
            <span class="row-font">我的借阅</span>
          </router-link>
        </el-row>
        <el-row class="left-everyrow"
          ><!--我的分享-->
          <router-link
            :to="{ name: 'myShare' }"
            tag="button"
            :class="showShare ? 'showRow' : 'notShow'"
            @click.native="change('share')"
          >
            <span class="row-font">我的分享</span>
          </router-link>
        </el-row>
        <el-row class="left-everyrow"
          ><!--我的缴费-->
          <router-link
            :to="{ name: 'myCost' }"
            tag="button"
            :class="showCost ? 'showRow' : 'notShow'"
            @click.native="change('cost')"
          >
            <span class="row-font">我的缴费</span>
          </router-link>
        </el-row>
        <el-row class="left-everyrow"
          ><!--个人设置-->
          <router-link
            :to="{ name: 'mySetting' }"
            tag="button"
            :class="showSetting ? 'showRow' : 'notShow'"
            @click.native="change('setting')"
          >
            <span class="row-font">个人设置</span>
          </router-link>
        </el-row>
      </el-col>
      <el-col :span="20"
        ><!--右边对应的显示-->
        <router-view :key="$router.fullPath"> </router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "person",
  data() {
    return {
      showBorrow: true,
      showShare: false,
      showCost: false,
      showSetting: false,
      ifCost: this.$route.query.ifCost,
    };
  },
  methods: {
    change(name) {
      this.init();
      if (name === "borrow") {
        this.showBorrow = true;
      
      } else if (name === "share") {
        this.showShare = true;
      } else if (name === "cost") {
        this.showCost = true;
      } else if (name === "setting") {
        this.showSetting = true;
      }
    },
    init() {
      this.showBorrow = false;
      this.showShare = false;
      this.showCost = false;
      this.showSetting = false;
    },
  },
  mounted() {
    //默认打开首页
    this.$nextTick(() => {
      this.$router.push({ name: "myBorrow" });
    });
  },
};
</script>
<style scoped>
.left-col {
  background-color: rgba(240, 239, 230, 1);
}
.left-everyrow {
  width: 100%;
  height: 70px;
  background-color: rgba(240, 239, 230, 1);
}
.notShow {
  width: 100%;
  height: 100%;
  background-color: rgba(240, 239, 230, 1);
  border-color: transparent;
  cursor: pointer;
}
.notShow:hover {
  background-color: rgba(168, 189, 203, 1);
}
.showRow {
  width: 100%;
  height: 100%;
  background-color: rgba(168, 189, 203, 1);
  border-color: transparent;
  cursor: pointer;
}
.row-font {
  font-size: 20px;
  letter-spacing: 2px;
}
</style>